<script lang="ts" setup>
import { onMounted, ref } from 'vue';

const viewport = ref<HTMLElement>()

const props = withDefaults(defineProps<{ scale?: number }>(), { scale: 0.95 })

onMounted(() => {
    if (viewport.value && viewport.value.children.length > 0) {
        const children = viewport.value.children[0] as HTMLElement
        const parentWidth = viewport.value.getBoundingClientRect().width
        const childrenWidth = children.getBoundingClientRect().width
        const scale = parentWidth * props.scale / childrenWidth
        children.style.transform = `translate(-50%, -50%) scale(${scale})`
        children.style.position = "absolute"
        children.style.left = "50%"
        children.style.top = "50%"
    }
})
</script>

<template>
    <div class="umrp-viewport" ref="viewport">
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
.umrp-viewport {
    background-color: #f2f2f2;
    position: relative;
    height: 100%;
    width: 100%;
}
</style>